<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睡眠计划</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body class="container">
<div>
    <br>
    <br/>
    <!--导航栏-->
    <div>
        <!--个人信息-->
        <div style="float:left; width: 20%">
            <form class="form-horizontal" action="/user/info" method="post">
                <!--id-->
                <input type="hidden" name="uid" th:value="${user.uid}"/>
                <input type="submit" value="个人信息" style="width: 100%" class="btn btn-info"/>
            </form>
        </div>

        <!--睡眠计划-->
        <div style="float:left; width: 20%">
            <form class="form-horizontal" action="/user/plan" method="post">
                <!--id-->
                <input type="hidden" name="uid" th:value="${user.uid}"/>
                <input type="submit" value="睡眠计划" style="width: 100%; background-color: red" class="btn btn-info"/>
            </form>
        </div>
        <!--睡眠记录-->
        <div style="float:left; width: 20%">
            <form class="form-horizontal" action="/sleep/list" method="post">
                <!--id-->
                <input type="hidden" name="uid" th:value="${user.uid}"/>
                <input type="submit" value="睡眠记录" style="width: 100%" class="btn btn-info"/>
            </form>
        </div>
        <!--论坛-->
        <div style="float:left; width: 20%">
            <form class="form-horizontal" action="/comment/list" method="post">
                <!--id-->
                <input type="hidden" name="uid" th:value="${user.uid}"/>
                <input type="submit" value="论坛" style="width: 100%" class="btn btn-info"/>
            </form>
        </div>
        <!--登录的用户信息-->
        <div style="float:right; width: 20%">
            <input type="hidden" id="uid" th:value="${user.uid}">
            <h3 th:text="'欢迎您:'+${user.nickname}"/>
        </div>
    </div>
    <br/>

    <!--统计与计划 表格内容-->
    <div>
        <h1>统计与计划</h1>
        <script src="../../layer/layer.js"></script>
        <!--bootstrapTable表头-->
        <div class="with:80%">
            <table id="comment-table" class="table table-striped table-bordered"></table>
        </div>

        <!--bootstrapTable内容-->
        <script>
            $(function () {

                //睡眠质量文字显示
                function getQuality(value, row, index) {
                    let avgCycle = row.avgCycle;
                    if (avgCycle >= 4.5) {
                        return [
                            '<span>优</span>'
                        ].join('');
                    }
                    if (avgCycle >= 4) {
                        return [
                            '<span>良</span>'
                        ].join('');
                    }
                    if (avgCycle >= 3.5) {
                        return [
                            '<span>中</span>'
                        ].join('');
                    }
                    if (avgCycle < 3.5) {
                        return [
                            '<span>差</span>'
                        ].join('');
                    }
                }

                //计划区间显示
                function getPlan(value, row, index) {
                    let afterPlanMinTime = row.afterPlanMinTime;
                    let afterPlanMaxTime = row.afterPlanMaxTime;
                    if (afterPlanMaxTime == null && afterPlanMinTime == null) {
                        return [
                            '<span>-------</span>'
                        ].join('');
                    }
                    if (afterPlanMaxTime == null) {
                        afterPlanMaxTime === "-";
                    }
                    if (afterPlanMinTime == null) {
                        aftirPlanMinTime === "-";
                    }
                    return [
                        '<span>' + afterPlanMinTime + '---' + afterPlanMaxTime + '</span>'
                    ].join('');
                }

                $("#comment-table").bootstrapTable({
                    url: "/user/plan-data",//数据地址
                    striped: true,//是否显示行的间隔
                    pageNumber: 1,//初始化加载第几页
                    pagination: false,//是否分页
                    sidePagination: 'server',
                    pageSize: 10,
                    pageList: [10, 15, 20],
                    showRefresh: true,
                    queryParams: function (params) {
                        var temp = {
                            offset: params.offset,
                            limit: params.limit,
                            pageSize: params.pageSize,
                            uid: $("#uid").val()
                        };
                        return temp;
                    },
                    columns: [
                        // {
                        //     title: "编号",
                        //     field: "cid",
                        //     sortable: true
                        // },
                        {
                            title: "前X天",
                            field: "frontDay",
                            sortable: false
                        },
                        {
                            title: "平均周期",
                            field: "avgCycle",
                            sortable: false
                        },
                        {
                            title: "睡眠质量",
                            field: "avgCycle",
                            formatter: getQuality//将代号转为文字
                        },
                        {
                            title: "后期计划",
                            field: "plan",
                            formatter: getPlan//区间显示后期计划
                        }
                        // ,
                        // {
                        //     title: "后期计划",
                        //     field: "afterPlanMinTime",
                        //     sortable: false
                        // },
                        // {
                        //     title: "后期计划",
                        //     field: "afterPlanMaxTime",
                        //     sortable: false
                        // }
                    ]
                });
            });
        </script>
    </div>
</div>
</body>
</html>